<template>
  <div v-loading="loading">
    <el-row>
      <el-collapse :v-model="1" @change="handleChange">
        <el-collapse-item :title='`[${props.warnRAObj.warnName}]--基本信息`' name="1">
          <el-form ref="warnRelativeRef" :model="form"  label-width="80px" :inline="true">
            <el-form-item label="预警编号" prop="warnNo">
              <el-input v-model="form.warnNo" placeholder="无"  style="width: 280px" readonly/>
            </el-form-item>
            <el-form-item label="预警名称" prop="warnName">
              <el-input v-model="form.warnName" placeholder="无" style="width: 280px" readonly/>
            </el-form-item>
            <el-form-item label="一级预警阈值" prop="warnLevel1"  label-width="130px">
              <el-input v-model="form.warnLevel1" placeholder="无" style="width: 60px" readonly/>
            </el-form-item>
            <el-form-item label="二级预警阈值" prop="warnLevel2"  label-width="160px">
              <el-input v-model="form.warnLevel2" placeholder="无" style="width: 60px" readonly/>
            </el-form-item>
            <el-form-item label="三级预警阈值" prop="warnLevel3"  label-width="160px">
              <el-input v-model="form.warnLevel3" placeholder="无" style="width: 60px" readonly/>
            </el-form-item>
            <el-form-item label="速率监控间隔时间(min)" prop="rateTime" label-width="160px" >
              <el-input v-model="form.rateTime" placeholder="0(min)" style="width: 60px" readonly />
            </el-form-item>
            <el-form-item label="基线数量" prop="baseLines">
              <el-input v-model="form.baseLines" placeholder="请输入基线数量" style="width: 60px" readonly/>
            </el-form-item>
            <div v-if="fiberInfo.channelModel=='1'">
              <el-form-item label="基线数量" prop="baseLines">
                <el-input v-model="form.baseLines" placeholder="---" style="width: 60px" />
              </el-form-item>
              <el-form-item label="基线时间范围" prop="baseLineTime" label-width="120px"  readonly>
                <el-input v-model="form.baseLineTime" placeholder="请输入基线时间范围" style="width: 60px"  readonly/>
              </el-form-item>
              <el-form-item label="最小发生次数" prop="occurrence" label-width="120px">
                <el-input v-model="form.occurrence" placeholder="请输入最小发生次数" style="width: 60px" readonly/>
              </el-form-item>
              <el-form-item label="预警覆盖最大范围" prop="tolerance" label-width="130px">
                <el-input v-model="form.tolerance" placeholder="请输入预警覆盖最大范围" style="width: 60px" readonly/>
              </el-form-item>
            </div>
          </el-form>
        </el-collapse-item>

      </el-collapse>
    </el-row>
    <el-divider />
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option v-for="dict in warn_his_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="检测时间" style="width: 308px">
        <el-date-picker
            v-model="daterangeCreationTs"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleIgnore"
          v-hasPermi="['warn:warnHis:remove']"
      >忽略</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['warn:warnHis:export']"
      >导出</el-button>
    </el-col>
    <!--          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>-->
  </el-row>
  <el-table v-loading="loading" :data="warnHisList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="流水号" align="center" prop="id" v-if="false"/>
    <el-table-column label="检测时间" align="center" prop="creationTs" width="160">
    </el-table-column>
    <el-table-column label="起点距离(m)" align="center" prop="startDistance" />
    <el-table-column label="终点距离(m)" align="center" prop="endDistance" />
    <el-table-column label="峰值距离(m)" align="center" prop="peakDistance" />
    <el-table-column label="峰值数值" align="center" prop="peakValue" />
    <el-table-column label="预警级别" align="center" prop="warnLevel" />
    <el-table-column label="状态" align="center" prop="status" width="100px">
      <template #default="scope">
        <dict-tag :options="warn_his_status" :value="scope.row.status"/>
      </template>
    </el-table-column>
    <el-table-column label="处理人" align="center" prop="updateBy" />
    <el-table-column label="处理时间" align="center" prop="updateTime" />
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template #default="scope">
<!--        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['warn:warnHis:edit']">查看</el-button>-->
        <el-button link type="primary" icon="Delete" @click="handleIgnore(scope.row)" v-hasPermi="['warn:warnHis:remove']">忽略</el-button>
      </template>
    </el-table-column>
  </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    </div>
</template>

<script setup>
import { listWarnHis, getWarnHis, delWarnHis, addWarnHis, updateWarnHis, ignoreWarnHis } from "@/api/warn/warnHis";
const { proxy } = getCurrentInstance();
const { warn_his_status } = proxy.useDict('warn_his_status');

const showSearch = ref(true);
const loading = ref(true);
const warnHisList = ref([]);
const total = ref(0);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const warnNo = ref("")
const daterangeCreationTs = ref([]);

const form = ref({})

const props = defineProps({
  warnRAObj: {
    type: Object,
    required: true,
    default: {
      id: -1,
      warnNo: undefined
    }
  },
  fiberInfo: {
    type: Object,
    required: true,
    default: {
      id: -1,
      fiberNum: undefined
    }
  }
})

const queryParams =ref( {
      pageNum: 1,
      pageSize: 10,
      lineId: null,
      fiberNum: null,
      warnNo: null,
      creationTs: null,
      status: null,
    })
/** 查询预警历史记录列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {orderByCreationTs:"true"};
  queryParams.value.warnNo = props.warnRAObj.warnNo

  if (null != daterangeCreationTs && '' != daterangeCreationTs) {
    queryParams.value.params["beginCreationTs"] = daterangeCreationTs.value[0];
    queryParams.value.params["endCreationTs"] = daterangeCreationTs.value[1];
  }

  listWarnHis(queryParams.value).then(response => {
    warnHisList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  daterangeCreationTs.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

function handleIgnore(row) {
  const _ids = row.id || ids.value;
  console.log(_ids)
  let count = 0
  let pIds = []
  if (!_ids.length) {
    count = 1
    pIds.push(_ids)
  } else {
    count = _ids.length
    pIds = _ids
  }
  proxy.$modal.confirm('是否确认忽略预警历史记录' + count + '条数据项？').then(function() {
    let data = {"ids": pIds}
    return ignoreWarnHis(data);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("操作成功");
  }).catch(() => {});
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('warn/warnHis/export', {
    ...queryParams.value
  }, `warnHis_${new Date().getTime()}.xlsx`)
}

function handleChange(val){
  console.log(val)
}

getList()


onMounted(() => {
  form.value = props.warnRAObj
})
</script>

<style scoped>

</style>
